<template>
	<view class='container'>
		<view class='card_wrap'>
			<view class="card_item" v-for="(item,index) in cardInfoList" :key="index" @touchstart='touchstart'
				@touchend="touchend" :animation="index === 0 ? animationData : ''" v-show="!item.show">
				<view :class="index===0?'card_container card_item_passive':'card_container'"
					:style="{opacity:index==1?.4:0}">
					<view class="top">
						<view>
							<view class="lastStep" v-if="nowPgae!==1" @click="up">上一步</view>

						</view>
						<view class="multiple" v-if="nowPgae===cardInfoList.length">
							可多选
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: column;flex: 1;justify-content: space-around;">
						<view :class="topic[Xindex].opt?'options options_opt':'options'"
							v-for="(items ,Xindex) in topic" :key="Xindex" @click="setOpt(Xindex)" :style="{opacity:topic[Xindex].title?'1':0 }">
							<view class="text">
								<view class="title">
									{{topic[Xindex].title}}
								</view>
								<view class="num">
									{{topic[Xindex].subhead}}
								</view>
							</view>
							<u-icon name="checkmark-circle-fill" size="60rpx"
								:color="topic[Xindex].opt?'#F9CC68':'#FAFAFA'"></u-icon>
						</view>

					</view>

					<view class="createCustomization" v-if="nowPgae===cardInfoList.length" @click="createCustomization">
						立即生成
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			cardInfoList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				nowPgae: 1,
				startX: 0,
				slider: false,
				animationData: {},
				topic: [],
				throttle: false
			}
		},
		watch: {
			nowPgae() {
				
				this.topic = this.cardInfoList[0].topic
			},
			cardInfoList() {
console.log(this.cardInfoList[0].topic)
				this.topic = this.cardInfoList[0].topic
				
			}
		},

		methods: {
			setOpt(Xindex) {
				if (this.throttle||!this.topic[Xindex].title) return;
				this.throttle = true
				setTimeout(() => {
					this.throttle = false
				}, 500)
				//单选
				if (this.nowPgae != this.cardInfoList.length) {
					this.topic.forEach(item => {
						item.opt = false
					})
				}
				this.topic[Xindex].opt = !this.topic[Xindex].opt
				//单选题 自动翻页
				if (this.topic[Xindex].opt && this.nowPgae != this.cardInfoList.length) this.down()
			},
			touchstart(e) {
				this.startX = e.changedTouches[0].clientX
			},
			touchend(e) {
				let startX = this.startX;
				let endX = e.changedTouches[0].clientX;
				if (this.slider) return;
				// 下一页(左滑距离大于30)
				if (startX - endX > 30) {
					this.down()
				}
				// 上一页
				if (endX - startX > 30) {
					this.up()
				}
			},
			up() {
				let that = this;
				this.slider = true
				//首页
				if (this.nowPgae == 1) {
					this.slider = false
					wx.showToast({
						title: '已经到第一张了',
						icon: 'none'
					})
					return;
				};

				//创建动画  移动到-150%,-150%
				let animation = wx.createAnimation({
					duration: 0,
				});
				animation.translateX('-150%').translateY('-150%').rotate(100).opacity(1).scale(0.05).step();
				var cardInfoList = that.cardInfoList;
				var slidethis = that.cardInfoList.pop(); //删除数组末尾项
				slidethis.show = false
				that.cardInfoList.unshift(slidethis); //将删除的末尾项放到第一项

				that.animationData = animation.export()
				that.cardInfoList = that.cardInfoList
				setTimeout(function() {
					//创建动画   5s将位置移动到原位
					let animation2 = wx.createAnimation({
						duration: 500,
						// timingFunction: 'cubic-bezier(.8,.1,.2,0.8)',
					});
					animation2.translateX('-50%').translateY('-54%').rotate(0).scale(1).step();
					that.animationData = animation2.export()
					that.slider = false
					that.nowPgae = that.nowPgae - 1
					that.$emit('pageTurning', that.nowPgae)
				}, 50)
			},
			down() {
				let that = this;
				this.slider = true
				//尾页(当前页 等于 总页数)
				if (this.nowPgae == this.cardInfoList.length) {
					this.slider = false
					wx.showToast({
						title: '已经是最后一张了',
						icon: 'none'
					});
					return;
				};
				//创建动画   5s将位置移动到-150%,-150%
				let animation = wx.createAnimation({
					duration: 500,
				});
				animation.translateX('-150%').translateY('-150%').rotate(60).opacity(.4).scale(.05).step();
				this.animationData = animation.export()
				// 移动完成后
				setTimeout(function() {
					var cardInfoList = that.cardInfoList;
					var slidethis = that.cardInfoList.shift(); //删除数组第一项
					slidethis.show = true
					that.cardInfoList.push(slidethis); //将第一项放到末尾
					//创建动画   将位置归位
					let animation = wx.createAnimation({
						duration: 0,
					});
					animation.translateX('-50%').translateY('-54%').rotate(0).scale(1).step();
					that.cardInfoList = that.cardInfoList,
						that.animationData = animation.export(),
						that.slider = false,
						that.nowPgae = that.nowPgae + 1

					setTimeout(() => {
						let animation = wx.createAnimation({
							duration: 200,
						});
						animation.translateX('-50%').translateY('-54%').opacity(1).scale(1).step()
						that.animationData = animation.export()
					}, 10)
					that.$emit('pageTurning', that.nowPgae)

				}, 500)
			},
			createCustomization() {
				let data = {}
				this.cardInfoList.forEach(item => {
					data['desc_' + item.id] = []
					item.topic.forEach(items => {

						if (items.opt) {
							console.log(data['desc_' + item.id], items)
							data['desc_' + item.id].push(items.title)
						}
					})
					data['desc_' + item.id] = data['desc_' + item.id]
				})

				this.$emit('createCustomization', data)
				console.log(data)
			}

		}
	}
</script>
<style lang="scss">
	page {
		background-color: $uni-bg-color;
		height: 100%;
	}

	.container {
		height: 100%;

		.card_wrap {
			position: relative;
			width: 100%;
			height: 80%;
		}

		.card_wrap .card_item {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 60%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);

		}

		.card_item:nth-child(1) {
			z-index: 4;
			transform: translateX(-50%) translateY(-54%);
		}

		.card_item:nth-child(2) {
			z-index: 3;
			transform: translateX(-50%) translateY(-52%);
		}

		.card_item:nth-child(3) {
			z-index: 2;
			transform: translateX(-50%) translateY(-50%);
		}

		.card_item:nth-child(4) {
			z-index: 1;
			transform: translateX(-50%) translateY(-48%);
		}

		.card_container {
			padding: 50rpx 40upx;
			font-size: 100rpx;
			// width: 100%;
			height: 100%;
			opacity: 0;
			display: flex;
			flex-direction: column;

			transition: all 5s ease-in-out;
			background: #fff;
			border-radius: 20rpx;
			transform: scale(.95);

			.top {
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				font-weight: 700;
				text-align: center;
				line-height: 60upx;

				.lastStep {
					width: 160upx;
					height: 60upx;

					border-radius: 30upx;
					color: #FFFFFF;
					background-color: #F9CC68;
					color: #FFFFFF;
				}

				.multiple {
					color: #F9CC68;
				}
			}


			.options {
				display: flex;
				padding: 40upx 30upx;
				background-color: #FAFAFA;
				border: 2upx solid #FAFAFA;
				border-radius: 40upx;
				margin: 11upx 0;

				.text {
					flex: 1;
					color: #333333;

					.title {
						font-size: 36upx;
						font-weight: 700;

					}

					.num {
						font-size: 28upx;
					}
				}
			}

			.options_opt {
				border: 2upx solid #F9CC68;
			}

			.createCustomization {
				background-color: #F9CC68;
				width: 236upx;
				height: 70upx;
				border-radius: 35upx;
				color: #FFFFFF;
				line-height: 70upx;
				font-size: 32upx;
				font-weight: 700;
				text-align: center;
				margin: 20upx auto;

			}
		}

		.card_item_passive {
			opacity: 1 !important;
			transform: scale(1);
			// animation: myKeyframes 1s;
		}
	}
</style>
